<template>
  <div class="list">
    <h2>任务列表</h2>
    <ul>
      <li v-for="(item, index) in arr" :key="item.title">
        <!-- <input type="checkbox" v-model="checkedS[index]" /> -->
        <input type="checkbox" v-model="item.isChecked" />
        <!-- dblclick -->
        <span
          :class="{ line: item.isChecked }"
          v-show="!item.isShowSpan"
          @click="item.isShowSpan = true"
        >
          {{ item.title }}
        </span>
        <input
          type="text"
          value="输入框"
          v-model.lazy="item.title"
          v-show="item.isShowSpan"
          @blur="inp(index)"
          @keyup.enter="inp(index)"
        />
      </li>
    </ul>
    <!-- <ul>
      <li>
        <input
          type="text"
          value="输入框"
          v-show="!isShowSpan"
          v-model.lazy="inpTxt2"
          @keyup.enter="inp"
        />
        <span v-show="isShowSpan" @click="changeSpan">{{ inpTxt2 }}</span>
      </li>
    </ul> -->
    <div class="middle">
      <span>任务总数{{ listAll }}; 还有{{ listFinish }}未完成;</span>
      <a href="#" @click="remove">完成</a>
    </div>
    <div class="bottom">
      <input type="text" placeholder="请输入任务名称" v-model="inpTxt" />
      <button @click="add">添加</button>
    </div>
  </div>
</template>

<script>
/*
    1.数据渲染：
        任务数据：item
        任务总数：arr.length[计算属性]
        未完成：item.isChecked[计算属性]
    2.添加任务
        arr.push({}) 非空校验
    3.选中
        添加删除线样式：line-through
    4.批量删除
        arr.slice()
        num--
    5.编辑功能
        click if(isChecked) v-show 
        v-model.lazy
*/
export default {
  data() {
    return {
      inpTxt2: "文本",
      arr: [
        {
          title: "预习Vuex知识点",
        },
        {
          title: "编写课后练习题",
        },
        {
          title: "抄写单词20遍",
        },
      ],
      // 输入文本
      inpTxt: "",
      // 存索引
      arr2: [],
      // 是否显示文本输入
      isShowSpan: [],
    };
  },
  computed: {
    listAll: {
      get() {
        return this.arr.length;
      },
    },
    listFinish: {
      get() {
        return this.arr.reduce((pre, cur) => {
          if (!cur.isChecked) {
            return pre + 1;
          }
          return pre;
        }, 0);
        // 外加数组
        // return this.checkedS.reduce((pre, cur) => {
        //   if (!cur) {
        //     return pre + 1;
        //   }
        //   return pre;
        // }, 0);
      },
    },
  },
  created() {
    // 外加数组
    // this.checkedS = this.arr.map((item) => false);
    this.arr.forEach((item) => {
      this.$set(item, "isChecked", false);
    });
    this.arr.forEach((item) => {
      this.$set(item, "isShowSpan", false);
    });
  },
  methods: {
    add() {
      if (this.inpTxt.trim()) {
        this.arr.push({
          title: this.inpTxt,
          isShowSpan: false,
        });
        this.inpTxt = "";
      }
    },
    remove() {
      // 外加数组
      // this.checkedS.forEach((item, index) => {
      //   if (item) {
      //     this.arr2.push(index);
      //   }
      // });
      // console.log(this.arr2);
      // let num = 0;
      // this.arr2.forEach((item, index) => {
      //   this.arr.splice(item + num, 1);
      //   num--;
      // });
      this.arr.forEach((item, index) => {
        if (item.isChecked) {
          this.arr2.push(index);
        }
      });
      let num = 0;
      this.arr2.forEach((item, index) => {
        this.arr.splice(item + num, 1);
        num--;
      });
    },

    inp(i) {
      this.arr[i].isShowSpan = false;
      console.log(i);
    },
  },
};
</script>

<style lang='less' scoped>
* {
  user-select: none;
}
.list {
  border: 1px solid #ccc;
  width: 300px;
  margin: 30px auto;
  position: relative;
  right: 100px;
  padding: 5px 20px;
  h2 {
    text-align: center;
  }
  ul {
    li {
      list-style: none;
      display: flex;
      border-bottom: 1px solid #ccc;
      span {
        display: inline-block;
        line-height: 30px;
        margin-left: 5px;
      }
    }
  }
  .middle {
    line-height: 40px;
    a {
      margin-left: 20px;
    }
  }
  .bottom {
    input {
      height: 30px;
      outline-style: none;
    }
    button {
      margin-left: 10px;
      height: 30px;
      padding: 0 3px;
    }
  }
}
input {
  outline-style: none;
  // height: 16px;
  margin: 5.5px;
}
.line {
  color: #aaa;
  text-decoration: line-through;
}
.inp {
  margin: 5.5px;
}
</style>